<template>
  <div class="notify">
    <van-field
      readonly
      clickable
      name="area"
      :value="value"
      label="地区选择"
      placeholder="点击选择省市区"
      @click="showArea = true"
    />
    <van-popup v-model="showArea" position="bottom">
      <van-area
        title="省市区"
        :area-list="areaList"
        @confirm="onConfirm"
        @cancel="showArea = false"
        value="110101"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from "../Publish/area.js";

export default {
  data() {
    return {
      value: "",
      showArea: false,
      areaList, // 数据格式见 Area 组件文档
    };
  },
  methods: {
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
  },
};
</script>

<style></style>
